<template>
  <el-dialog
    title="日志查看"
    :visible.sync="logDialogVisible"
    :before-close="handleClose"
    width="1000px"
    class="viewLog"
  >
    <div class="container">
      <div class="handle-box" v-if="show">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          class="mr10"
          >新增</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        height="300px"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          type="index"
          width="60"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="记录人"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="记录时间" align="center" width="230">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="记录内容"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 新增/编辑-弹出框 -->
    <el-dialog
      :title="dialogStatus"
      :visible.sync="addVisible"
      width="40%"
      append-to-body
    >
      <el-form
        ref="ruleForm"
        label-width="100px"
        :model="formData"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="formData.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注">
                            <el-input type="textarea" v-model="formData.remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="childrenDialog" size="small">取消</el-button>
        <el-button
          @click="submitForm('ruleForm')"
          type="primary"
          size="small"
          :loading="isLogin"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  getDataMoreN, 
  submitFormaddN
} from "@/api/systemSettings/customerManagement";
export default {
  components: {},
  // props: [
  //   "logDialogVisible", 
  //   "corporateNameTitle"
  // ],
  props:{
    logDialogVisible:{
      type:Boolean
    },
    corporateNameTitle:{
      type:String
    },
    show:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      loading: true,
      isLogin: false,
      customerId: "",
      params: {
        pageNum: 1,
        pageSize: 10
      },
      pageTotal: 0,
      tableData: [],
      //新增
      type: 1,
      dialogStatus: "",
      addVisible: false,
      formData: {},
      rules: {
        content: [
          { required: true, message: "请输入日志内容", trigger: "blur" }
        ]
      },
      //用户id
      userId: ""
    };
  },
  computed: {},
  created() {
    let adminData = JSON.parse(localStorage.getItem("adminData"));
    this.userId = localStorage.getItem("useId");
  },
  filters: {
    formatDate: function(value) {
      /*let date = new Date(parseInt(value) * 1000);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y+'-'+m + "-" + d;*/
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  mounted() {},
  watch: {},
  methods: {
    //关闭弹窗
    handleClose() {
      this.$emit("closeDialog");
    },
    childrenDialog() {
      this.addVisible = false;
    },
    //获取数据
    getDataMoreN(id) {
      var _this = this;
      this.params.customerId = id;
      this.formData.customerId = id;
      (this.customerId = id),
        getDataMoreN(this.params)
          .then(res => {
            if (res.code == "200") {
              this.tableData = res.rows;
              this.pageTotal = res.total;
              this.loading = false;
            }
          })
          .catch(() => {
            console.log("error submit!!");
            return false;
          });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.getDataMoreN(this.customerId);
    },
    //新增页面弹窗
    handleAdd() {
      this.addVisible = true;
      (this.type = 1), (this.dialogStatus = "新增");
      this.formData = {
        content: "",
        customerId: this.customerId
      };
    },
    //保存数据
    submitForm(formName) {
      var _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formData.content.trim() == "") {
            return this.$message.error(`内容不能为空`);
          } else {
            this.isLogin = true;
            submitFormaddN(this.formData)
              .then(res => {
                if (res.code != 200) {
                  setTimeout(() => {
                    this.isLogin = false;
                    this.$message.error(`新增失败`);
                  }, 0.1 * 1000);
                } else {
                  setTimeout(() => {
                    this.isLogin = false;
                    this.$message.success(`新增成功`);
                    this.addVisible = false;
                    this.getDataMoreN(this.customerId);
                  }, 0.1 * 1000);
                }
              })
              .catch(() => {
                this.isLogin = false;
              });
          }
        }
      });
    }
  }
};
</script>

<style>
.viewLog .el-dialog__body {
  padding: 5px 20px !important;
}
</style>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #e8954d;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
